<template>
	<div id="a">
		<div class="con">
			<el-steps :active="active" finish-status="success">
				<el-step title="步骤 1"></el-step>
				<el-step title="步骤 2"></el-step>
				<el-step title="步骤 3"></el-step>
			</el-steps>

			<div style="width: 400px;margin-left: calc(50% - 200px); margin-top: 200px;" v-if="this.active==0">
				<div>会员手机号码:
					<div class="kuang" style="margin-top: 20px;">
						<el-input v-model="vip.vtele"></el-input>
					</div>
				</div>
			</div>
			<div style="width: 400px;margin-left: calc(50% - 200px); margin-top: 200px;" v-if="this.active==1">
				<div>会员姓名:
					<div class="kuang" style="margin-top: 20px;">
						<el-input v-model="vip.vname"></el-input>
					</div>
				</div>
			</div>
			<div style="width: 400px;margin-left: calc(50% - 200px); margin-top: 200px;" v-if="this.active==2">
				<div>充值金额:
					<div class="kuang" style="margin-top: 20px;">
						<el-input v-model="vip.vmoney"></el-input>
					</div>
				</div>
				<!--<div style="text-align: center;margin-top: 10px;">
					<el-button>提交</el-button>
				</div>-->
			</div>
			<div style="width: 400px;margin-left: calc(50% - 200px); margin-top: 200px;" v-if="this.active==3">
				<div style="margin-top: 20px;height: 600px;">
					<div id="zi" style="width: 150px;float: left;">
						会员电话号码：
					</div>
					<div class="kua" style="width: 200px; float: left;">
						{{this.vip.vtele}}
					</div>
					<div id="zi" style="width: 150px;float: left;">
						会员姓名：
					</div>
					<div class="kua" style="width: 200px; float: left;">
						{{this.vip.vname}}
					</div>
					<div id="zi" style="width: 150px;float: left;">
						会员充值金额：
					</div>
					<div class="kua" style="width: 200px; float: left;">
						{{this.vip.vmoney}}
					</div>
					<div style="text-align: center;width:100%;margin-top: 250px;">
						<el-button @click="add">提交</el-button>
					</div>
				</div>

			</div>
			<div style="text-align: center;margin-top: 350px;">
				<el-button style="margin-top: 12px;" @click="next" v-if="this.active!=3">下一步</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				vip: {
					vtele: '',
					vname: '',
					vmoney: ''
				}
			};
		},

		methods: {
			next() {
				if(this.active++ > 2) this.active = 0;
			},
			add: function() {
				this.$http.post('http://localhost:8080/OrderSystemServer/order/vip/add', this.vip)
					.then((response) => {
						if(response.data.isOK) {
							alert("发布成功~");
						}else{
							alert("发布失败~")
						}
						this.active==0;
						location.reload();
					});
			}
		}
	}
</script>

<style>
	.con {
		width: 800px;
		height: 875px;
		margin-left: calc(50% - 400px);
	}
</style>